<template>
  <div class="viewDetail">
    <div class="viewDetail-title">规则设置</div>
    <div class="viewDetail-big">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
        label-position="left"
      >
        <div class="content-item">
          <el-form-item label="类型：" prop="name">
             <span @click="getSelectProgrammeType" style="color: #2d8cf0; cursor: pointer"> 修改类型</span>
          </el-form-item>
          <el-form-item label="触发条件："  prop="name">
            <div class="condition-big">
              <div class="flex-item">
                <el-form-item label="性别："  prop="name"        label-width="70px">
                  <el-select
                    v-model="queryParams.userName6"
                    @change="handleQuery"
                    placeholder="请选择性别"
                    size="mini"
                    class="select-right"
                  >
                    <el-option
                      v-for="item in sexTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="name" style="margin-left: 10px;">
                  <el-checkbox-group v-model="queryParams.userName6">
                    <el-checkbox :label="item.value" v-for="(item ,index) in sexList" :key="index">{{item.label}}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
              <el-form-item  label="含任意标签：" prop="name">
                <div  class="flex-item">
                  <div class="label-list">
                    <span>一般 <i class="el-icon-close"></i></span>
                    <span>重要 <i class="el-icon-close"></i></span>
                    <span>核心<i class="el-icon-close"></i></span>
                  </div>
                  <div style="height: 32px;"><el-button plain size="small" @click="openTableLabel">选择企微标签</el-button></div>

                </div>

              </el-form-item>
            </div>

          </el-form-item>
          <el-form-item label="自动打标签："  prop="name">
            <div  class="flex-item">
              <div class="label-list">
                <span>一般 <i class="el-icon-close"></i></span>
                <span>重要 <i class="el-icon-close"></i></span>
                <span>核心<i class="el-icon-close"></i></span>
              </div>
              <div style="height: 32px;"><el-button  plain size="small" @click="openTableLabel">选择企微标签</el-button></div>
            </div>
            <span class="labelMsg"><i class="el-icon-warning"></i>新客户添加后未打标签，触发默认方案后，自动打设置的标签。</span>
          </el-form-item>
          <el-form-item label="自动备注：" prop="name">
            <el-switch
              v-model="form.open">
            </el-switch>
            <el-input type="textarea" v-model="form.name" placeholder="请输入备注" class="textarea"></el-input>
            <span class="msg" >变量间若需要分隔符请自己设置, 备注限20字，超过部分不显示</span>
          </el-form-item>
          <el-form-item label="发送内容：">
            <div class="contentBig">
              <div class="item-li">
                <div class="time">
                  <el-input type="number" v-model="form.name" size="mini" class="select-left"></el-input>
                  <el-select
                    v-model="queryParams.userName6"
                    @change="handleQuery"
                    placeholder="时间"
                    size="mini"
                    class="select-right"
                  >
                    <el-option
                      v-for="item in timeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                  <div>10分钟后发送</div>
                </div>
                <div class="content-li">
                  <div class="index">1</div>
                  <div class="text">几句话感觉金</div>
                </div>
              </div>
              <div class="item-li">
                <div class="time">
                  <el-input type="number" v-model="form.name" size="mini" class="select-left"></el-input>
                  <el-select
                    v-model="queryParams.userName6"
                    @change="handleQuery"
                    placeholder="时间"
                    size="mini"
                    class="select-right"
                  >
                    <el-option
                      v-for="item in timeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                  <div>10分钟后发送</div>
                  <el-button class="qun-btn">拉群动作</el-button>
                </div>
                <!--              群-->
                <div class="content-li">
                  <div class="index">1</div>
                  <div class="qun">
                    <div class="open-Btn">自动新建群开启</div>
                    <div class="mgt-btn" @click="getGroupInvitationMgt">管理</div>
                  </div>
                </div>
              </div>
              <div class="item-li">
                <div class="time">
                  <el-input type="number" v-model="form.name" size="mini" class="select-left"></el-input>
                  <el-select
                    v-model="queryParams.userName6"
                    @change="handleQuery"
                    placeholder="时间"
                    size="mini"
                    class="select-right"
                  >
                    <el-option
                      v-for="item in timeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                  <div>10分钟后发送</div>
                  <el-button class="qun-btn">拉群动作</el-button>
                </div>
                <!--              图片-->
                <div class="content-li">
                  <div class="index">1</div>
                  <div class="images">
                    <img src="../../../assets/images/profile.jpg"/></div>
                </div>

              </div>
              <div class="item-li">
                <div class="time">
                  <el-input type="number" v-model="form.name" size="mini" class="select-left"></el-input>
                  <el-select
                    v-model="queryParams.userName6"
                    @change="handleQuery"
                    placeholder="时间"
                    size="mini"
                    class="select-right"
                  >
                    <el-option
                      v-for="item in timeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                  <div>10分钟后发送</div>
                  <el-button class="qun-btn">拉群动作</el-button>
                </div>
                <!--              视频-->
                <div class="content-li">
                  <div class="index">1</div>
                  <div class="images">
                    <img src="../../../assets/images/profile.jpg"/></div>

                </div>
              </div>
              <!--                文件-->
              <div class="item-li">
                <div class="time">
                  <el-input type="number" v-model="form.name" size="mini" class="select-left"></el-input>
                  <el-select
                    v-model="queryParams.userName6"
                    @change="handleQuery"
                    placeholder="时间"
                    size="mini"
                    class="select-right"
                  >
                    <el-option
                      v-for="item in timeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                  <div>10分钟后发送</div>
                  <el-button class="qun-btn">拉群动作</el-button>
                </div>
                <div class="content-li">
                  <div class="index">1</div>
                  <div class="file">
                    <img src="../../../assets/images/profile.jpg" class="fileImg"/>
                    <div class="file-right">
                      <div class="file-name">OA+商城.docx</div>
                      <div class="file-size">132.43 kB</div>
                    </div>
                  </div>
                </div>
              </div>
              <!--                文件-->
              <div class="item-li">
                <div class="time">
                  <el-input type="number" v-model="form.name" size="mini" class="select-left"></el-input>
                  <el-select
                    v-model="queryParams.userName6"
                    @change="handleQuery"
                    placeholder="时间"
                    size="mini"
                    class="select-right"
                  >
                    <el-option
                      v-for="item in timeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                  <div>10分钟后发送</div>
                  <el-button class="qun-btn">拉群动作</el-button>
                </div>
                <div class="content-li">
                  <div class="index">1</div>
                  <div class="links">
                    <div class="file-right">
                      <div class="links-name">百度</div>
                      <div class="links-content">百度是一家互联网公司</div>
                    </div>
                    <img src="../../../assets/images/profile.jpg" class="fileImg"/>
                  </div>
                </div>
                <operationPage></operationPage>
              </div>
              <typeComponent></typeComponent>

            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <tableLabel v-if="showTableLabel" :visableIf.sync="showTableLabel"></tableLabel>
    <selectProgrammeType v-if="showSelectProgrammeType" :visableIf.sync="showSelectProgrammeType"></selectProgrammeType>

  </div>
</template>

<script>
//import {listUser, delUser,} from "@/api/system/user";

import {listUser} from "@/api/system/user";

export default {
  name: "addOrEditUserOperations",
  components: {
    'typeComponent': () => import('./typeComponent.vue'),//查看筛选条件
    'operationPage': () => import('./operationPage.vue'),//查看筛选条件
    'tableLabel': () => import('./tableLabel.vue'),
    'selectProgrammeType': () => import('./selectProgrammeType.vue'),
  },
  data() {
    return {
      active: 0,//当前选中
      tableHeight: 600,
      showViewConditions: false,
      showSelectProgrammeType:false,//修改方案
      showTableLabel:false,
      form: {
      name:'',
      },
      rules: {
        'name': [
          {required: true, message: '请输入标签名称', trigger: 'blur'}
        ],

      },
      timeList: [
        {
          value: 1,
          label: '秒',
        },
        {
          value: 2,
          label: '分钟',
        },
        {
          value: 3,
          label: '小时',
        },
      ],
      sexTypeList:[
        {
          value: 1,
          label: '限制',
        },
        {
          value: 2,
          label: '不限',
        },
      ],
      sexList:[
        {
          value: 1,
          label: '男',
        },
        {
          value: 2,
          label: '女',
        },
        {
          value: 3,
          label: '未知',
        },
      ],
      tableColumns: [
        {key: 'name', label: `员工`, visible: true, minWidth: 150, fixed: true},
        {key: 'label', label: `朋友圈`, visible: true, minWidth: 150, fixed: false},
        {key: 'label', label: `评论1`, visible: true, minWidth: 150, fixed: false},
        {key: 'label', label: `评论2`, visible: true, minWidth: 150, fixed: false},
      ],
      tableDataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,//用户id
        userName1: null,

      },
      total: 8, // 表格的总条数
    };
  },
  created() {
  },
  methods: {
    getActive(index) {
      this.active = index;
    },
    getSelectProgrammeType(){
      this.showSelectProgrammeType=true;
    },
    getConditions() {
      this.showViewConditions = true;
    },
    openTableLabel(){
      this.showTableLabel=true;
    },
      getGroupInvitationMgt(){
        this.$router.push({path:'/customerOperationsMgt/newUserOperationsMgt/GroupInvitationMgt'})
      },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.tableDataList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
  }
};
</script>
<style lang="scss" scoped>
.viewDetail {
  height: 100%;
  position: relative;

  .viewDetail-title {
    height: 50px;
    line-height: 50px;
    padding-left: 16px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, .85);
  }


  .viewDetail-footer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #eee;
  }

  .tips {
    background: #fed;
    border-radius: 2px;
    border: 1px solid #ffdbb6;
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 15px;
    word-wrap: break-word;
    font-size: 14px;
    margin: 20px;
  }
}

.content-item {
  padding: 0px 20px;
}

.msg {
  font-size: 12px;
  color: #888;
}

.labelMsg {
  margin-top: 8px;
  background: #ebf2ff;
  border-radius: 2px;
  border: none;
  margin: 0;
  color: rgba(0, 0, 0, .65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 15px;
  word-wrap: break-word;
  max-width: 700px;
  margin-top: 10px;
  i {
    color: #3070ff;
    margin-right: 5px;
  }
}

.time {
  height: 40px;
  display: inline-flex;
  line-height: 24px;
  padding: 8px 10px;
  background: #f5f5f5;
  border: 1px solid #e9e9e9;
  border-bottom: 0;
  font-size: 14px;
  color: #666;

  .select-left {
    width: 70px;
    margin-right: 5px;
  }

  .select-right {
    width: 80px;
    margin-right: 10px;
  }

  .qun-btn {
    margin-left: 10px;
    height: 28px;
    display: flex;
    padding: 0px;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0px 10px;
    background-color: rgb(250, 173, 20);
    color: #fff;
    border: none;
  }
}

.content-li {
  position: relative;
  padding: 10px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  min-height: 60px;
  border: 1px solid #eee;

  .index {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    background: #ddd;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    margin-right: 10px;
  }

  .text {
    width: fit-content;
    padding: 0px 12px;
    height: 36px;
    font-size: 15px;
    color: #000;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
  }

  .qun {
    display: flex;
    align-items: center;

    .open-Btn {
      color: rgba(0, 0, 0, .65);
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5715;
      list-style: none;
      font-feature-settings: "tnum", "tnum";
      position: relative;
      display: flex;
      align-items: center;
      padding: 8px 15px;
      word-wrap: break-word;
      border-radius: 4px;
      background-color: #fffbe6;
      border: 1px solid #ffe58f;
    }

    .mgt-btn {
      line-height: 1.5715;
      font-weight: 400;
      white-space: nowrap;
      text-align: center;
      box-shadow: unset;
      cursor: pointer;
      transition: all .3s cubic-bezier(.645, .045, .355, 1);
      user-select: none;
      touch-action: manipulation;
      height: 32px;
      padding: 4px 15px;
      font-size: 14px;
      border-radius: 4px;
      color: rgba(0, 0, 0, .65);
      border: 1px solid #e9e9e9;
      background: #fff;
      margin-left: 10px;
    }
  }

  .images {
    display: block;
    max-width: 160px;
    max-height: 160px;
    cursor: pointer;
    border-radius: 5px;

    img {
      width: auto;
      height: auto;
      max-height: 100%;
      max-width: 100%;
      object-fit: cover;
    }
  }

  .file {
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    cursor: pointer;
    max-width: 240px;
    padding: 12px;
    height: 76px;
    display: flex;
    align-items: center;

    img {
      width: 40px;
      height: 50px;

    }

    .file-right {
      margin-left: 10px;
      line-height: 20px;

      .file-size {
        margin: 5px 0 0;
        font-size: 12px;
        color: #a1a7b7;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  .links {
    display: flex;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    cursor: pointer;
    padding: 12px;
    margin-right: 10px;

    .file-right {
      margin-right: 60px;
      line-height: 40px;

    }

    .links-content {
      color: #888;
    }

    img {
      width: 80px;
      height: 80px;
      object-fit: cover;
    }

  }
}

.contentBig {
  border: 1px solid #eee;
  padding: 20px;

  .item-li {
    margin-bottom: 10px;
    position: relative;
  }
}

.viewDetail {
  overflow-y: auto;
}

.viewDetail-big {
  height: calc(100vh - 200px);
  overflow-y: auto;
  padding-top: 10px;
  box-sizing: border-box;
}

.operation-big {
  display: flex;
  position: absolute;
  top: 70px;
  right: 30px;

  img {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    cursor: pointer;
  }


}
.label-list {
  label {
    font-size: 14px;
    line-height: 1.5715;
    word-wrap: break-word;
    font-weight: 400;
  }

  span {
    margin: 4px 4px 4px 0;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    white-space: nowrap;
    background: #fafafa;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    padding: 0px 7px;
    display: inline-block;
    i{
      margin-left: 5px;
      cursor: pointer;
    }

  }
}
.flex-item {
    display: flex;
    flex-wrap: wrap;
}
.condition-big {
  border: 1px solid #eee;
  padding: 20px;
}
</style>
